<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>浏览历史</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .thumbnail {
            margin-bottom: 15px;
        }
        .caption h4 a {
            color: #337ab7; /* 商品名称的颜色 */
        }
        .caption p {
            color: #888; /* 浏览时间的颜色 */
        }
        .row {
            display: flex;
            flex-wrap: wrap;
        }
        .col-md-3 {
            flex: 0 0 25%; /* 每个列占25%宽度 */
            max-width: 25%;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>浏览历史</h2>
    <hr>
    <div class="row">
        <c:forEach items="${browseList}" var="browse" varStatus="status">
            <c:if test="${status.first || browse.rtime != browseList[status.index - 1].rtime}">
                <!-- 新的一天开始 -->
                <div class="row">
            </c:if>
            <div class="col-md-3">
                <div class="thumbnail">
                    <!-- 添加<a>标签包裹图片，并设置href属性为商品详情页的URL -->
                    <a href="product?method=detail&pid=${browse.pid}&uid=${browse.uid}">
                        <img src="${pageContext.request.contextPath}${browse.pimage}" class="img-responsive" alt="商品图片">
                    </a>
                    <div class="caption">
                        <h4><a href="product?method=detail&pid=${browse.pid}&uid=${browse.uid}">${browse.pname}</a></h4>
                        <p><fmt:formatDate value="${browse.rtime}" pattern="yyyy-MM-dd"/></p>
                    </div>
                </div>
            </div>
            <c:if test="${status.last || browse.rtime != browseList[status.index + 1].rtime}">
                <!-- 当前日期的最后一项或列表结束 -->
                </div>
            </c:if>
        </c:forEach>
    </div>
</div>
</body>
</html>